<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加弹窗</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <style>
    .layui-table-tool {
      min-height: unset;
    }
    .layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
      height: 25px;
      line-height: 25px;
    }
    .special-section {
      padding: 20px 0px 10px 0; /* 上、右、下、左 设置内边距，这里将左边的边框右移20像素 */
      background-color: #f5f5f5; /* 设置背景颜色 */
      /* 其他样式设置 */
    }

  </style>
</head>
<body>


<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">

  <div class="layui-form-item">
    <label class="layui-form-label">弹窗名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input"
             placeholder="自定义" value="">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">授权App</label>
    <div class="layui-input-block">
      <input type="checkbox"  title="全选" lay-skin="primary" lay-filter="qx">
      {foreach $qas as $vo}
      <input type="checkbox" name="quick_apps[]" value="{$vo.id}" title="{$vo.name}" lay-skin="primary" checked>
      {/foreach}
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">弹出频率</label>
    <div class="layui-input-block">
      <input type="radio" name="frequency" value="1" title="每天" checked>
      <input type="radio" name="frequency" value="2" title="每一小时">
      <input type="radio" name="frequency" value="3" title="每两小时">
      <input type="radio" name="frequency" value="4" title="每六小时">
      <input type="radio" name="frequency" value="5" title="每八小时">
      <input type="radio" name="frequency" value="0" title="始终提醒">
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">弹窗位置</label>
    <div class="layui-input-block">
      <input type="checkbox" name="seat[]" value="1" title="充值页返回" lay-skin="primary" checked>
      <input type="checkbox" name="seat[]" value="2" title="阅读页返回" lay-skin="primary">
      <input type="checkbox" name="seat[]" value="3" title="书架" lay-skin="primary">
      <input type="checkbox" name="seat[]" value="4" title="书城" lay-skin="primary">
      <input type="checkbox" name="seat[]" value="5" title="分类页" lay-skin="primary">
      <input type="checkbox" name="seat[]" value="6" title="任务页" lay-skin="primary">
      <input type="checkbox" name="seat[]" value="7" title="个人中心" lay-skin="primary">
    </div>
    <div class="layui-form-mid layui-word-aux">充值页返回弹窗必须两分钟之内存在未支付订单才会弹出</div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">弹出日期</label>
    <div class="layui-input-block">
      <input type="radio" lay-filter="date_type" name="date_type" value="1" title="所有日期" checked>
      <input type="radio" lay-filter="date_type" name="date_type" value="2" title="每周六">
      <input type="radio" lay-filter="date_type" name="date_type" value="3" title="每周日">
      <input type="radio" lay-filter="date_type" name="date_type" value="4" title="每周六日">
      <input type="radio" lay-filter="date_type" name="date_type" value="5" title="自定义日期">
    </div>
  </div>

  <div class="layui-form-item" id="dateItem" style="display: none;">
    <label class="layui-form-label">日期范围</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" name="start_end" id="start_end" placeholder=" - ">
    </div>
  </div>

  <div class="special-section">

  <div class="layui-form-item">
    <label class="layui-form-label">测试读者</label>
    <div class="layui-input-block">
      <input type="text" name="test_user_id" lay-verify="num" autocomplete="off" class="layui-input"
             placeholder="请输入读者id，可不填" value="">
      <div class="layui-form-mid layui-word-aux">该用户无需判断下列条件，可用于查看弹窗效果</div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">用户群体</label>
    <div class="layui-input-block">
      <input type="radio" name="user_grep" value="1" title="广告用户" checked>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">充值条件</label>
    <div class="layui-input-block">
      <input type="radio" lay-filter="is_pay" name="is_pay" value="0" title="不限" checked>
      <input type="radio" lay-filter="is_pay" name="is_pay" value="1" title="已充值">
      <input type="radio" lay-filter="is_pay" name="is_pay" value="2" title="未充值">
    </div>
  </div>

  <div class="layui-form-item" id="payItem" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label">充值金额</label>
      <div class="layui-form-mid layui-word-aux">>=</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="mini_pay_money" placeholder="￥" autocomplete="off" class="layui-input" lay-verify="money" value="0.1">
      </div>
      <div class="layui-form-mid">元，且充值次数 >= </div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" name="mini_pay_num" placeholder="次" autocomplete="off" class="layui-input" lay-verify="enum" value="1">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">书币余额</label>
    <div class="layui-input-block">
      <input type="radio" name="coin_balance" value="1" title="不限" checked>
      <input type="radio" name="coin_balance" value="2" title="低于200">
      <input type="radio" name="coin_balance" value="3" title="低于500">
      <input type="radio" name="coin_balance" value="4" title="低于2000">
      <input type="radio" name="coin_balance" value="5" title="低于5000">
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">注册范围</label>
    <div class="layui-input-block">
      <input type="radio" name="register_type" lay-filter="register" value="0" title="不限" checked>
      <input type="radio" name="register_type" lay-filter="register" value="1" title="自定义">
    </div>
  </div>



  <div class="layui-form-item" id="registerItem" style="display:none;">
    <div class="layui-input-block">
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" name="register_start" placeholder="可不填" autocomplete="off" class="layui-input" lay-verify="num" value="">
      </div>
      <div class="layui-form-mid">天外，且</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" name="register_end" placeholder="可不填" autocomplete="off" class="layui-input" lay-verify="num" value="">
      </div>
      <div class="layui-form-mid">天内</div>
      <div class="layui-form-mid layui-word-aux">1天代表24小时不是自然日，如：一周内，只需填写第二项“7天内”，范围为闭区间</div>
    </div>
  </div>

  {if $role->alias != 'channel' && $role->alias != 'agent'}
  <div class="layui-form-item">
    <label class="layui-form-label">阅读章节数</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="number" name="read_num" placeholder="" autocomplete="off" class="layui-input" lay-verify="enum" value="0">
    </div>
    <div class="layui-form-mid layui-word-aux">当月最低阅读章节数，适用于外部链接</div>
  </div>
  {/if}

  </div>



    <div class="layui-form-item">
    <label class="layui-form-label">弹窗类型</label>
    <div class="layui-input-block">
      <input type="radio" name="type" lay-filter="type" value="1" title="推书" checked>
      <input type="radio" name="type" lay-filter="type" value="2" title="充值活动">
      {if $role->alias != 'agent'}
      <input type="radio" name="type" lay-filter="type" value="3" title="外部链接">
      {/if}
    </div>
    {if $role->alias != 'agent'}
    <div class="layui-form-mid layui-word-aux">外部链接类型只有管理员有权限设置</div>
    {/if}
  </div>

  <div class="layui-form-item" id="novelItem">
    <label class="layui-form-label">推送小说</label>
    <div class="layui-input-block">

      <script type="text/html" id="addNovel">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-xs" lay-event="add">添加</button>
        </div>
      </script>

      <script type="text/html" id="table-useradmin-admin">
        <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete" ></i></a>
      </script>
      <table lay-filter="parse-table-demo">
        <thead>
        <tr>
          <th lay-data="{field:'id', width:80}">小说ID</th>
          <th lay-data="{field:'title', width:150}">小说名</th>
          <th lay-data="{field:'scale', width:80,align: 'center'}">评级</th>
          <th lay-data="{field:'freq_class', minWidth: 180,align: 'center'}">频道 · 分类</th>
          <th lay-data="{field:'in_shelf',  width:100,align: 'center'}">是否上架</th>
          <th lay-data="{toolbar: '#table-useradmin-admin', width:80,align: 'center'}">操作</th>
        </tr>
        </thead>
        <tbody id="novelTable">
<!--          <input type="hidden" name="table_novel_id[]" value="635">-->
<!--          <tr>-->
<!--            <td>635</td>-->
<!--            <td>逍遥小贵婿</td>-->
<!--            <td>C级</td>-->
<!--            <td>男生 · 都市</td>-->
<!--            <td>上架</td>-->
<!--            <td></td>-->
<!--          </tr>-->
        </tbody>
      </table>

    </div>
  </div>

  <div class="layui-form-item" id="activityItem" style="display: none;">
    <label class="layui-form-label">充值活动</label>
    <div class="layui-input-block">
      <select name="activity_id" lay-search>
        <option value="">请选择</option>
        {foreach $allActivity as $vo}
        <option value="{$vo.id}">{$vo.title}</option>
        {/foreach}
      </select>
      <div class="layui-form-mid layui-word-aux">可不上传封面，默认使用活动图片</div>
    </div>
  </div>

  <div class="layui-form-item"  id="jumpItem" style="display: none;">

    {if $role->alias != 'channel' && $role->alias != 'agent'}
    <div class="layui-form-item">
      <label class="layui-form-label">代理名单</label>
      <div class="layui-input-block">
        <input type="checkbox"  title="全选" lay-skin="primary" lay-filter="qx2">
        {foreach $agents as $vo}
        <input type="checkbox" name="agents[]" value="{$vo.id}" title="{$vo.account}" lay-skin="primary" checked>
        {/foreach}
      </div>
    </div>
    {/if}

    <label class="layui-form-label">跳转地址</label>
    <div class="layui-input-block">
      <input type="text" name="jump_url"  autocomplete="off" class="layui-input"
             placeholder="外部链接地址如：http://cms.quick.com" value="">
    </div>
  </div>

  <div class="layui-form-item" id="picItem" style="display: none;">
    <label class="layui-form-label">弹窗图片</label>
    <div class="layui-input-block">
      <div class="layui-upload-drag" id="pic">
        <div id="pic_head">
          <i class="layui-icon"></i>
          <p>点击上传，或将文件拖拽到此处</p>
        </div>
        <div class="layui-hide" id="uploadDemoView">
          <img src="" alt="上传成功后渲染" style="max-width: 128px;width: 128px;">
          <input type="hidden" name="pic" value="">
        </div>
      </div>
    </div>
  </div>

  <div class="layui-form-item layui-hide">
    <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
  </div>
</div>


<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'laydate','table'], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,layer = layui.layer
            ,form = layui.form
            ,table = layui.table
            ,upload = layui.upload
            ,laydate = layui.laydate;

    //日期时间范围
    laydate.render({
      elem: '#start_end'
      ,type: 'date'
      ,range: true
    });



    form.on('checkbox(qx)', function (data) {
      if (data.elem.checked === true) {
        $("input[name='quick_apps[]']").prop('checked', true);
      } else {
        $("input[name='quick_apps[]']").prop('checked', false);
      }
      form.render('checkbox');
    });

    form.on('checkbox(qx2)', function (data) {
      if (data.elem.checked === true) {
        $("input[name='agents[]']").prop('checked', true);
      } else {
        $("input[name='agents[]']").prop('checked', false);
      }
      form.render('checkbox');
    });


    table.init('parse-table-demo', { //转化静态表格
      //height: 'full-500'
       toolbar: '#addNovel' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: false
      , size: 'sm' //小尺寸的表格
    });

    form.on('radio(date_type)', function(data){
      if (data.value == 5){
        $("#dateItem").css('display','block');
      }else{
        $("#dateItem").css('display','none');
      }
    });

    form.on('radio(is_pay)', function(data){
      if (data.value == 1){
        $("#payItem").css('display','block');
      }else{
        $("#payItem").css('display','none');
      }
    });

    form.on('radio(register)', function(data){
      if (data.value == 1){
        $("#registerItem").css('display','block');
      }else{
        $("#registerItem").css('display','none');
      }
    });


    form.on('radio(type)', function(data){
      if (data.value == 1) {
        $("#novelItem").css('display', 'block');
        $("#activityItem").css('display', 'none');
        $("#picItem").css('display', 'none');
        $("#jumpItem").css('display', 'none');
      } else if (data.value == 2) {
        $("#novelItem").css('display', 'none');
        $("#activityItem").css('display', 'block');
        $("#picItem").css('display', 'block');
        $("#jumpItem").css('display', 'none');
      } else if (data.value == 3) {
        $("#novelItem").css('display', 'none');
        $("#activityItem").css('display', 'none');
        $("#picItem").css('display', 'block');
        $("#jumpItem").css('display', 'block');
      }
    });
    //拖拽上传
    upload.render({
      elem: '#pic'
      ,accept:'images'
      ,acceptMime: 'image/jpeg, image/png'
      ,url: '/tool/uploadPic?dirName=popup' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
      ,done: function(res){
        if (res.code !== 0){
          layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.picUrl);
          layui.$('#uploadDemoView').find('input').val(res.data.filePath);
          layui.$('#pic_head').addClass('layui-hide');
          console.log(res)
        }else {
          layer.msg(res.msg);
        }
      }
    });


    /* 自定义验证规则 */
    form.verify({
      num: function (value) {
        if (value.length > 0) {
          var reg = /^[1-9]\d*$/; // 正整数的正则表达式
          if (!reg.test(value)) {
            return '请输入正确的值';
          }
        }
      },
      money: function (value) {
        if (value.length > 0) {
          var res = false;
          var regex = /^[0-9]+(\.[0-9]+)?$/;
          if (regex.test(value)) {
            var num = parseFloat(value);
            if (num > 0) {
              res = true;
            }
          }
          if (res === false) {
            return '请输入正确金额';
          }
        }
      },
    });


    table.on('toolbar(parse-table-demo)', function (obj) {
      switch (obj.event) {
        case 'add':
          $("#nIds").val('');
          layer.open({
            type: 1,
            title:'添加小说',
            offset: '15px',
            area: ['80%', '300px'],
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            shadeClose: true, //开启遮罩关闭
            content: $('.hot-show'),
            btn: ['确定', '取消']
            ,yes: function(index, layero){
              var nIds = $("#nIds").val();
              if (nIds.length > 0) {
                let replacedText = nIds.replace(/，/g, ',');
                $("#nIds").val(replacedText);
                if (!isCommaSeparatedIds(replacedText)){
                  layer.msg('检查格式，请输入正确格式的小说id');
                   return false;
                }
                var nidArr = $('input[name="table_novel_id[]"]').map(function () {
                  return this.value;
                }).get();
                var newNidArr = replacedText.split(",");
                var saveArr = newNidArr.concat(nidArr);//c=[1,2,3,4,5,6];
                admin.req({
                  url: '/novel/renderNovels'
                  , type: "POST"
                  , data: {'nidArr': saveArr}
                  , done: function (res) {
                    renderNovel(res.data);
                    layer.close(index);
                  }, not_finish: function (res) {
                    layer.msg(res.msg);
                  }
                });
              }else {
                layer.msg('请输入小说id');
              }
            }
          });
          break;
      }
    });


    function isCommaSeparatedIds(str) {
      var regex = /^\d+(,\d+)*$/;
      return regex.test(str);
    }

    /**
     * 渲染小说
     * @param novels
     */
    function renderNovel(novels) {
      $("#novelTable").empty();

      $.each(novels, function(index, data) {
        var row = $('<tr>'); // 创建一个 tr 行元素
        var idCell = $('<td>').text(data.id); // 使用键 id 的值创建一个 td 元素
        var nameCell = $('<td>').text(data.title); // 使用键 name 的值创建一个 td 元素
        var scaleCell = $('<td>').text(data.scale + '级'); // 使用键 age 的值创建一个 td 元素
        var freqCell = $('<td>').text(data.freq.name + ' . ' + data.novel_class.name); // 使用键 age 的值创建一个 td 元素
        if (data.in_shelf == 1) {
          var shelfCell = $('<td>').text('上架');
        } else if(data.in_shelf == 2) {
          var shelfCell = $('<td>').text('下架');
        }else if(data.in_shelf == 0){
          var shelfCell = $('<td>').text('绝对下架');
        }
        row.append(idCell, nameCell, scaleCell, freqCell,shelfCell); // 将 td 单元格添加到 tr 行中
        $('#novelTable').append(row);

        var row = $('<input type="hidden" id="novel_' + data.id + '" name="table_novel_id[]" value="' + data.id + '">');
        $('#novelTable').append(row);
      });


      table.init('parse-table-demo', { //转化静态表格
        toolbar: '#addNovel' //开启头部工具栏，并为其绑定左侧模板
        , defaultToolbar: false
        , size: 'sm' //小尺寸的表格
      });


      //监听行工具事件
      table.on('tool(parse-table-demo)', function (obj) {
        var data = obj.data;
        if (obj.event === 'del') {
          document.getElementById("novel_" + data.id).remove();
          obj.del();
        }
      });

    }
  });




</script>
</body>
<div class="hot-show" style="display: none;">

  <form class="layui-form layui-form-pane" style="padding: 10px;" action="">
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">小说ID</label>
      <div class="layui-input-block">
        <textarea id="nIds" placeholder="请输入id，并用半角逗号分隔，如：1,2,3,4,5,6" class="layui-textarea"></textarea>
      </div>
    </div>
  </form>

</div>
</html>
